<template>
  <el-menu-item :index="handlePath(item.path)" @click="handleLink">
    <svg-icon :name="item.meta.icon" />
    <span style="margin-left: 5px; line-height: 56px">
      {{ item.meta.name }}
    </span>
  </el-menu-item>
</template>
  
  <script lang="ts">
import { defineComponent } from "vue";
import path from "path";
import { isExternal } from "@/utils/validate";
import { useRouter } from "vue-router";
import { setting } from "@/config";

export default defineComponent({
  props: {
    item: {
      type: Object,
      required: true,
    },
    fullPath: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const handlePath = (routePath: string) => {
      return path.resolve(props.fullPath, routePath);
    };

    const router = useRouter();

    // 打开外链
    const handleLink = () => {
      if (setting.externalLink && props.item.meta.url) {
        if (isExternal(props.item.meta.url)) {
          if (props.item.meta.blank) {
            window.open(props.item.meta.url);
            router.push(handlePath(props.item.path));
          } else {
            router.push({
              name: props.item.name,
              params: { url: props.item.meta.url },
            });
          }
        }
      } else {
        router.push(handlePath(props.item.path));
      }
    };

    return {
      handlePath,
      handleLink,
    };
  },
});
</script>
  
<style lang="scss" scoped>
</style>